<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {useRoute} from "vue-router";
import myAxios from "../../plugins/myAxios.ts";
import {Toast} from "vant";
import qs from 'qs';
import UserCardList from "../../components/UserCardList.vue";

const route = useRoute();
const {tags} = route.query;
const loading = ref(false);
const userList = ref([]);

onMounted(async () => {
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags,
      currentPage: 1
    },
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false})
    }
  })
      .then(function (response) {
        console.log('/user/search/tags succeed', response);
        return response?.data.records;
      })
      .catch(function (error) {
        console.error('/user/search/tags error', error);
        Toast.fail('请求失败');
      })
  if (userListData) {
    userListData.forEach(user => {
      user.tags = JSON.parse(user.tags);
    })
    userList.value = userListData;
  }
})

// const mockUser = {
//   id: 12345,
//   username: '游趣测试',
//   userAccount: '123123',
//   avatarUrl: '',
//   profile: '一名正在努力学习的毕业生，看着还挺精神，目前还有头发，还能继续学......阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴',
//   gender: 0,
//   phone: '13232223421',
//   email: 'xxx@qq.com',
//   tags: ['java', 'python', '大一', '求职中', 'emo', '大一', '求职中', 'emo'],
//   createTime: new Date(),
// }

</script>

<template>
  <user-card-list :user-list="userList" :loading="loading"/>
  <van-empty v-if="!userList" description="搜索结果为空"/>
</template>

<style scoped>

</style>